<template>
  <div class="cart-footer">
    <my-checkbox :value="allChecked" @change="$emit('all-check', $event)"
      >已选({{ totalNum }})</my-checkbox
    >
    <div class="cart-footer__right">
      <div class="cart-footer__price">￥{{ totalPrice.toFixed(2) }}</div>
      <my-button @click.native="onPay">下单</my-button>
    </div>
  </div>
</template>

<script>
import MyButton from "./MyButton.vue";
import MyCheckbox from "./MyCheckbox.vue";
export default {
  name: "CartFooter",
  components: { MyCheckbox, MyButton },
  props: {
    totalNum: {
      type: Number,
      required: true,
    },
    totalPrice: {
      type: Number,
      required: true,
    },
    allChecked: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    onPay() {
      this.$confirm({
        title:'请问你哪来的钱下单吗？',
        confirmText: '没钱，溜了！',
        cancelText: '有钱也不给你！'
      }).then(() => {
        console.log('确认了！')
      }).catch(() => {
        console.log('取消了！')
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.cart-footer {
  position: fixed;
  bottom: 0;
  width: 750px;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  background-color: #fff;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  z-index: 100;
  font-size: 30px;

  &__right {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__price {
    color: #e02d33;
    padding-right: 1.0667vw;
  }

  .my-button {
    width: 220px!important;
    height: 120px!important;
  }
}
</style>
